<template>
  <div class="bw-com-config-set">
    <div class="bw-config-head">
      <span class="head-title"> 组件在配置端详情 </span>

      <div class="head-extra">
        <a-tooltip v-if="!isMax" placement="top" title="最大化">
          <Icon
            class="bw-extra-icon"
            icon="ant-design:fullscreen-outlined"
            @click="onSize(true)"
          />
        </a-tooltip>

        <a-tooltip v-else placement="top" title="最小化">
          <Icon
            class="bw-extra-icon"
            icon="ant-design:fullscreen-exit-outlined"
            @click="onSize(false)"
          />
        </a-tooltip>

        <a-tooltip placement="top" title="关闭">
          <Icon
            class="bw-close-icon"
            icon="ant-design:close-outlined"
            @click="onCloseCode"
          />
        </a-tooltip>
      </div>
    </div>

    <div class="bw-config-contnet">
      <div class="bw-group">
        <span class="label"> 属性配置组件 </span>
        <a-select
          class="input"
          placeholder="请选择配置组件"
          :options="curSetComList"
          v-model:value="curSetCom"
        />
      </div>

      <div class="bw-group">
        <span class="label"> 配置组件属性详情 </span>

        <a-textarea
          class="input"
          placeholder="请输入配置组件详情"
          v-model:value="curSetComAttrs"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, computed, defineComponent } from 'vue'
import { useComDesignStoreWithOut } from '@/store'
import { BwCustomComPropSetConfig } from '@bitwit/utils-render-model'

export default defineComponent({
  name: 'BwCom',
  components: {},
  emits: ['close'],
  setup(props, { emit }) {
    const designStore = useComDesignStoreWithOut()

    const isMax = ref<boolean>(false)
    const curSetCom = computed({
      get: () => {
        const info = designStore.getDesignInfo
        const cInfo = info?.comPropsSetConfig

        console.log('curSetCom', cInfo)
        return cInfo ? `${cInfo.appCode}__${cInfo.comCode}` : undefined
      },
      set: (value: string) => {
        const [appCode, comCode] = value.split('__')
        const info = designStore.getDesignInfo
        if (info && appCode && comCode) {
          const cInfo: BwCustomComPropSetConfig = info.comPropsSetConfig ?? {}

          cInfo.appCode = appCode ?? ''
          cInfo.comCode = comCode ?? ''
          designStore.setComPropsSetConfig(cInfo)
        }
      },
    })

    const curSetComAttrs = computed({
      get: () => {
        const info = designStore.getDesignInfo
        const cInfo = info?.comPropsSetConfig
        return cInfo ? JSON.stringify(cInfo?.attrs ?? {}) : undefined
      },
      set: (value) => {
        const info = designStore.getDesignInfo
        if (info && value) {
          const cInfo: BwCustomComPropSetConfig = info.comPropsSetConfig ?? {}

          cInfo.attrs = JSON.parse(value)
          info.comPropsSetConfig = cInfo
        }
      },
    })

    const curSetComList = computed(() => {
      const list: Array<Record<string, any>> = []
      const coms = designStore.curCustomComList
      if (Array.isArray(coms) && coms.length) {
        coms.forEach((item) => {
          let is = false
          const keywords = item.keywords ?? []
          keywords.some((n) => {
            is = ['com-attr-set-com'].includes(n)
            return is
          })
          if (is) {
            const comCode = item.code ?? item.id
            const appCode = item.appCode ?? item.appId

            list.push({
              label: item.name,
              value: `${appCode}__${comCode}`,
            })
          }
        })
      }
      return list
    })

    const onSize = (is: boolean) => {
      isMax.value = is
    }
    const onCloseCode = () => emit('close', false)

    return {
      isMax,
      curSetCom,
      curSetComList,
      curSetComAttrs,

      onSize,
      onCloseCode,
    }
  },
})
</script>

<style lang="less" scoped>
.bw-com-config-set {
  width: 100%;
  height: 100%;

  .bw-config-head {
    height: 35px;
    display: flex;
    padding: 0 8px;
    align-items: center;
    width: calc(100% - 16px);
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;

    .head-title {
      font-size: 14px;
      font-weight: 600;
    }

    .bw-extra-icon {
      margin-right: 8px;
    }
  }

  .bw-config-contnet {
    width: 100%;
    height: calc(100% - 36px);
    overflow: auto;

    .bw-group {
      padding: 8px;
      display: flex;
      width: calc(100% - 16px);
      flex-direction: column;

      .label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
      }

      .input {
        width: 100%;
      }
    }
  }
}

.bw-logic-design-max {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: #fff;
  z-index: 1200;
}
</style>
